<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-30 09:32:55
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-31 14:09:55
-->
<template>
  <div class="app-container">
    <div class="center">
      <div class="left">
        <div class="title">待办中心</div>
        <div class="calendar" style="height: 370px">
          <el-calendar v-model="value" class="el_cal_out">
            <template slot="dateCell" slot-scope="{ data }">
              <div style="margin: 0px" @click="obtainDay(data)">
                {{ data.day.split("-").slice(2).join() }}<br />
                <!--标记-->
                <div v-for="(i, index) in dayTime" :key="index">
                  <div v-if="data.day == i" class="budge"></div>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
        <div class="leftTab">
          <template v-for="(item, index) in tab">
            <div
              :key="index"
              class="tabDetail"
              :class="active == item.value ? 'active' : ''"
              @click="tabChange(item)"
            >
              {{ item.label }}
            </div>
          </template>
        </div>
      </div>
      <div class="right">
        <div class="title">我发起的审批</div>
        <div class="search">
          <div class="search-left">
            <el-select v-model="querySearch.timeUnit" @change="timeUnitChange">
              <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select v-model="querySearch.status" @change="statusChange">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-right">
            <el-input
              v-model="querySearch.identification"
              placeholder="请输入审核名称"
            ></el-input>
            <el-button type="primary" size="default" @click="search"
              >搜索</el-button
            >
          </div>
        </div>
        <div class="appCenter">
          <template v-for="(item, index) in tabalData">
            <div :key="index" class="centerDetail" @click="MsgMainGo(item)">
              <div class="title">
                {{ item.subModule | subModule }}-{{ item.content }}
              </div>
              <div class="Originator">
                <span>发起人：</span> {{ item.sender }}
              </div>
              <div class="state">
                <span>审核状态：</span>{{ item.status | status }}
              </div>
              <div class="time">
                <span>发起时间：</span>{{ item.createTime }}
              </div>
            </div>
          </template>
        </div>
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          :page-size="querySearch.pageSize"
          :page-sizes="[12, 20, 30, 40, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="querySearch.pageNum"
          layout=" ->,total, sizes, prev, pager, next, jumper "
          :total="querySearch.total"
        >
        </el-pagination>
      </div>
    </div>
    <drawer
      :dialog="dialog"
      :publicId="publicId"
      :drawerData="drawerData"
      v-if="dialog.dialogDrawerEject"
    ></drawer>
    <exp-drawer
      :dialog="dialog"
      :publicId="publicId"
      :drawerData="drawerData"
      v-if="dialog.expDrawerEject"
    ></exp-drawer>
    <xshk-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      :crmType="crmType"
      :publicId="publicId"
      :columnId="columnId"
      v-if="dialog.xshkShowDrawerEject"
    ></xshk-drawer>
    <coupon-drawer
      :dialog="dialog"
      :publicId="publicId"
      :drawerData="drawerData"
      v-if="dialog.couponDrawerEject"
    ></coupon-drawer>
  </div>
</template>

<script>
import {
  select,
  haveContractRole,
  xshkSelect,
  planSelect,
  haveRecoveryRole,
  havePayContractRole,
  haveCouponRole,
  Couponselect,
} from "@/api/user";
import { toDoCenter } from "../../api/index";
import drawer from "../../layout/components/every/drawer.vue";
import XshkDrawer from "../../layout/components/every/xshkDrawer.vue";
import ExpDrawer from "../../layout/components/every/expDrawer.vue";
import CouponDrawer from "../../layout/components/every/couponDrawer.vue";
import taskDrawer from "../../views/task/dailyTask/components/drawer.vue";
export default {
  name: "toDoCenter",
  components: {
    drawer,
    XshkDrawer,
    ExpDrawer,
    CouponDrawer,
    taskDrawer,
  },
  filters: {
    status: function (value) {
      if (value == 3) {
        value = "通过";
      } else if (value == 4) {
        value = "拒绝";
      } else if (value == 5) {
        value = "审核中";
      }
      return value;
    },
    subModule: function (val) {
      if (val == 28) {
        val = "合同";
      } else if (val == 29) {
        val = "回款";
      } else if (val == 30) {
        val = "支付合同";
      } else if (val == 31) {
        val = "优惠券";
      }
      return val;
    },
  },
  created() {
    this.getList();
  },
  data() {
    return {
      drawerData: {},
      dialog: {
        activity: true,
        dialogDrawerEject: false,
        dialogDrawer: false,
        expDrawerEject: false,
        expDrawer: false,
        xshkShowDrawerEject: false,
        xshkShowDrawer: false,
        couponDrawerEject: false,
        couponDrawer: false,
        taskDrawerEject: false,
        taskDrawer: false,
        crmInfoShow: false,
        crmInfoShowEject: false,
        aboutShow: false,
        aboutShowEject: false,
        distributionShow: false,
        distributionShowEject: false,
      },
      columnId: 71,
      crmType: 9,
      publicId: Number,
      timeOptions: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 1,
          label: "日",
        },
        {
          value: 2,
          label: "周",
        },
        {
          value: 3,
          label: "月",
        },
      ],
      typeOptions: [
        {
          value: 0,
          label: "全部审核",
        },
        {
          value: 3,
          label: "通过",
        },
        {
          value: 4,
          label: "拒绝",
        },
        {
          value: 5,
          label: "审核中",
        },
      ],
      querySearch: {
        pageNum: 1,
        pageSize: 12,
        timeUnit: 0,
        type: 1,
        status: 0,
        identification: "",
        total: 0,
      },
      active: 1,
      value: "",
      dayTime: ["2022-1-2"],
      tabalData: [],
      tab: [
        {
          label: "我发起的审批（合同）",
          value: "1",
        },
        {
          label: "我发起的审批（回款）",
          value: "2",
        },
        {
          label: "我发起的审批（优惠）",
          value: "3",
        },
        {
          label: "待我审批的（合同）",
          value: "4",
        },
        { label: "待我审批的（回款）", value: "5" },
        { label: "待我审批的（优惠）", value: "6" },
      ],
    };
  },
  methods: {
    // 跳转或者打开抽屉
    MsgMainGo(item) {
      this.publicId = item.entryId;
      if (
        item.subModule !== 28 &&
        item.subModule !== 29 &&
        item.subModule !== 30 &&
        item.subModule !== 31
      ) {
        this.$router.push(item.url);
      } else if (item.subModule == 28) {
        haveContractRole().then((res) => {
          if (res.data == true) {
            select({ id: item.entryId }).then((res) => {
              this.drawerData = res.data;
              this.dialog.dialogDrawerEject = true;
              this.$nextTick(function () {
                this.dialog.dialogDrawer = true;
              });
            });
          } else {
            this.$message.info("无当前页面权限，请联系管理员配置！");
          }
        });
      } else if (item.subModule == 29) {
        haveRecoveryRole().then((res) => {
          if (res.data == true) {
            if (item.type == 2) {
              planSelect({ id: item.entryId }).then((res) => {
                this.crmType = 8;
                this.columnId = 71;
                this.drawerData = res.data;
                this.dialog.xshkShowDrawerEject = true;
                this.$nextTick(function () {
                  this.dialog.xshkShowDrawer = true;
                });
              });
            } else {
              xshkSelect({ id: item.entryId }).then((res) => {
                this.crmType = 9;
                this.columnId = 72;
                this.drawerData = res.data;
                this.dialog.xshkShowDrawerEject = true;
                this.$nextTick(function () {
                  this.dialog.xshkShowDrawer = true;
                });
              });
            }
          } else {
            this.$message.info("无当前页面权限，请联系管理员配置！");
          }
        });
      } else if (item.subModule == 30) {
        havePayContractRole().then((res) => {
          console.log(res);
          if (res.data == true) {
            Couponselect({ id: item.entryId }).then((res) => {
              this.drawerData = res.data;
              this.dialog.expDrawerEject = true;
              this.$nextTick(function () {
                this.dialog.expDrawer = true;
              });
            });
          } else {
            this.$message.info("无当前页面权限，请联系管理员配置！");
          }
        });
      } else if (item.subModule == 31) {
        haveCouponRole().then((res) => {
          if (res.data == true) {
            Couponselect({ id: item.entryId }).then((res) => {
              this.drawerData = res.data;
              this.dialog.couponDrawerEject = true;
              this.$nextTick(function () {
                this.dialog.couponDrawer = true;
              });
            });
          } else {
            this.$message.info("无当前页面权限，请联系管理员配置！");
          }
        });
      }
    },
    handleSizeChange(val) {
      this.querySearch.pageSize = val;
      this.querySearch.pageNum = 1;
      this.getList();
    },
    //  分页器
    handleCurrentChange(val) {
      this.querySearch.pageNum = val;
      this.getList();
    },
    // 搜索
    search() {
      this.getList();
    },
    // 时间切换
    timeUnitChange(val) {
      this.getList();
    },
    // 审核切换
    statusChange(val) {
      this.getList();
    },
    // 切换tab栏
    tabChange(item) {
      this.active = item.value;
      this.querySearch.type = item.value;
      this.getList();
    },
    obtainDay(data) {
      console.log(data);
    },
    // 获取列表
    getList() {
      toDoCenter(this.querySearch).then((res) => {
        this.tabalData = res.rows;
        this.querySearch.total = res.total;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  height: 92vh;
  overflow: auto;
}
.center {
  display: flex;
  .left {
    height: 92vh;
    width: 312px;
    border-right: 1px solid #ececec;
    .title {
      width: 100%;
      height: 64px;
      line-height: 64px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
      border-bottom: 1px solid #ececec;
    }
    .calendar {
      height: 370px;
      background-color: #fff;
      .title {
        padding: 24px 24px 0 24px;
        display: flex;
        justify-content: space-between;
      }
    }
    .titleContent {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
    .newTtile {
      cursor: pointer;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1267fa;
    }
    .el-calendar {
      width: 300px;
      height: 370px;
    }
    /deep/ .el-calendar__header {
      padding: 10px 0;
    }
    /deep/.el-button-group {
      .el-button {
        font-size: 12px !important;
      }
    }
    /deep/.el-calendar-day {
      display: flex;
      justify-content: center;
      height: 40px !important;
    }
    .budge {
      width: 8px;
      height: 8px;
      background: #e6a23c;
      border-radius: 50%;
      margin: 0 auto;
      margin-top: 5px;
    }
    .leftTab {
      .tabDetail {
        margin-top: 20px;
        width: 248px;
        height: 36px;
        line-height: 36px;
        border-radius: 6px;
      }
      .active {
        background: #f8f9fb;
        color: #1267fa;
      }
    }
  }
  .right {
    flex: 1;
    padding: 24px;
    .title {
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
    .search {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .search-right {
        display: flex;
      }
    }
    .appCenter {
      display: flex;
      flex-wrap: wrap;
      .centerDetail {
        margin-top: 22px;
        margin-right: 10px;
        padding: 15px;
        width: 24%;
        height: 167px;
        background: #f8f9fb;
        border-radius: 6px;
        .title {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #1267fa;
        }
        .Originator {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2b2b2b;
          margin-top: 20px;
        }
        .state {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2b2b2b;
          margin-top: 20px;
        }
        .time {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2b2b2b;
          margin-top: 20px;
        }
      }
    }
    .el-pagination {
      margin-top: 24px;
      /deep/ .el-pagination__total {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-right: 25px;
      }
      /deep/ .btn-prev {
        width: 80px;
        height: 40px;
        text-align: center;
      }
      /deep/ .btn-next {
        width: 80px;
        height: 40px;
        text-align: center;
      }
      /deep/ .number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      /deep/ .el-input__inner {
        // width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      /deep/ .more {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      /deep/ .el-pagination__jump {
        .el-input__inner {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}
</style>